''<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<form action="../index.html" method="get">
			用户：
			<input type="text" name="name"  placeholder="xz" pattern="[a-zA-Z]{6,10}" id="name" /><br /> 密码：
			<input type="password" name="pass" /><br />密码：
			<input type="password" name="que" /><br /> 电话：
			<input type="text" name="phone" /><br /> 性别：
			<input type="radio" name="sex" />男
			<input type="radio" name="sex" />女<br /> 爱好：
			<input type="checkbox" name="hod" />看书
			<input type="checkbox" name="hod" />学习
			<input type="checkbox" name="hod" />跑步<br /> 年龄：
			<input type="number" name="age" /><br /> 出生日期：
			<input type="date" name="data" /><br /> 班级：
			<select>
				<option value="1">一班</option>
				<option value="2">二班</option>
				<option value="4">四班</option>
			</select><br />
			图像:<input type="image" src="../images/1.jpg" width="200" height="200"/>
			<input type="file" /><br />
			编号：<input type="hidden" name="id"/><br />
			电子邮箱：<input type="text" name="email"/><br />
			<input type="submit" id="submit" value="提交" />
			<input type="reset" value="重置" />
			<input type="button" value="普通按钮"/>
		</form>

		<script type="text/javascript">
			$(function() {
				//value
				//$(":input").css("color","red")
				//单选按钮
				$(":radio").attr("checked", "checked")
				//复选框
				$(":checkbox").attr("checked", "checked")
				//单行文本框
				$(":text").val("@qq.com")
				//密码框
				$(":password").val("1111111")
				$("#submit").click(function() {
					var u = document.getElementById("name");
					if(u.validity.valueMissing == true) {
						u.setCustomValidity("昵称不能为空");
					} else if(u.validity.patternMismatch == true) {
						u.setCustomValidity("昵称必须是6~10位的英文");
					} else {
						u.setCustomValidity("");
					}
				})
				//按钮
				$(":submit").val("保存")
				//图像
				$(":image").css("border","1px solid orange")
				//重置
				$(":reset").val("清除")
				//按钮
				$(":button").css("color","red")
				//文件域
				$(":file").css("color","red")
				//隐藏
				$(":hidden").val("王五@qq.com")
				var id=$("[name='id']").val()
				//可见
				$(":enabled").css("font-size","12px")
				//禁用
				$("[type='button']").attr("disabled","disabled")
				$(":disabled").css("color","orange")
				//将选中的改成未选中
				$(":checked").removeAttr("checked")
				//获取下拉列表中选中的值
				var a=$(":selected").val()
				//提交按钮点击事件
				$("[type='submit']").click(function(){
					//获取邮箱
					var email=$("[name='email']").val()
					//验证邮箱
					if(email==""){
						alert("邮箱不能为空")
						//不提交
						return false;
					}else if(email.indexOf("@")<0){
						alert("邮箱必须包含@符号")
						return false
					}else if(email.indexOf(".com")<0){
						alert("邮箱必须包含.com")
						return false
					}
					//密码必须大于六位
					var pass=$("[name='pass']").val()
					if(pass.length<=6){
						alert("密码必须大于六位")
						return false
					}
					//姓名不能为空
					var name=$("[name='name']").val()
					if(name==''){
						alert("姓名不能为空")
						return false
					}
					//姓名不能为阿拉伯数字
					var names=name.split("")
					for(var i in names){
						if(isNaN(names[i])==false){
							alert("姓名不能包含数字")
							return false
						}
					}
					//获取确认密码
					var que=$("[name='que']").val()
					if(que!=pass){
						alert("两次密码不一致")
						return false
					}
				})
			})
		</script>
	</body>

</html>